<template>
  <div class="page-wrapper">
    <Header></Header>
    <div class="bgcolor">
      <div class="wrap pr" style="padding: 30px 0">
        <div class="mycenter">
         <div class="tabsLeft">
            <img class="avtar" :src="users.avatar" alt="头像" />
            <p style="padding: 10px 0">
              <span>{{ users.name }}</span>
            </p>
            <p class="col9">我的签名我的签名我的签名</p>
          </div>
          <el-tabs :tab-position="tabPosition">
            <el-tab-pane label="我的资料">
              <div class="datas">
                <h3>我的资料</h3>
                <ul>
                  <li class="flex">
                    <span>昵称：</span>
                    <input type="text" v-model="users.nickname" />
                    <div class="rex">
                      <span>性别：</span>
                      <el-radio v-model="radio" label="1">男</el-radio>
                      <el-radio v-model="radio" label="2">女</el-radio>
                    </div>
                  </li>
                  <li>
                    <span>现居：</span>
                    <input type="text" value="" v-model="users.address" />
                  </li>
                  <li>
                    <span>职业：</span>
                    <input
                      type="text"
                      value="工程师"
                      v-model="users.profession"
                    />
                  </li>
                  <li>
                    <span>签名：</span>
                    <input type="text" value="暂无" v-model="users.sign" />
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="我的消息">
              <div class="datas">
                <h3>我的消息</h3>
                <div v-if="message">
                  <dl class="infos" v-for="item in message" :key="item.id">
                    <dt>{{item.title}}</dt>
                    <dd class="text">{{item.description}} </dd>
                    <dd class="date col9" style="text-align: right">
                      {{item.create_time}}
                    </dd>
                  </dl>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="学习记录">
              <div class="datas">
                <h3>学习记录</h3>
                <p class="col9">今天15:30</p>
                <div class="list clearfix">
                  <dl v-for="(item,index) in learnsRecord" :key="index">
                    <dt>
                      <img :src="item.img" alt="" style="max-width: 100%" />
                    </dt>
                    <dd style="padding-top: 10px">
                      {{ item.title }}
                      <a href="http://" style="font-size: 12px">已学{{item.plan}}%</a>
                    </dd>
                  </dl>
                </div>
              </div></el-tab-pane
            >
            <el-tab-pane label="我的证书">
              <el-collapse v-model="activeNames" v-for="(item,idx) in certificates" :key="idx" @change="handleChange">
                <el-collapse-item :title="item.lm_name" name="1">
                  <div>
                    <img :src="item.photo" :alt="item.lm_name" style="max-width:100%;">
                  </div>
                  <el-row style="text-align:center;margin-top:30px">
                      <el-button type="warning">下载打印证书</el-button>
                  </el-row>
                </el-collapse-item>
                <!-- <el-collapse-item title="反馈 Feedback" name="2">
                  <div>
                    控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
                  </div>
                  <div>
                    页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
                  </div>
                </el-collapse-item> -->
              
              </el-collapse>
              <img :src="certificates.img" alt="" style="max-width: 100%" />
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- <div class="main-content"></div> -->
      </div>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/components/layout/header.vue";
import Footer from "@/components/layout/footer.vue";
export default {
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      tabPosition: "left",
      radio: "1",
      activeNames: [],
      message: [],
      learnsRecord: [],
      certificates: [],
      certificateimg:'',
      users: {
        nickname: "",
      },
    };
  },
  mounted() {
    this.userInfo();
    this.msglist();
    this.certificate();
  },
  methods: {

    userInfo() {
      this.$axios.post("/api/Video/record_list").then((res) => {
        this.users = res.data.data.user_obj;
        this.learnsRecord = res.data.data.deal_list;
        // console.log(res.data.data.user_obj);
      });
    },
    msglist() {
      this.$axios.post("/api/User/message").then((res) => {
        this.message = res.data.data;
        // console.log("message",res.data);
      });
    },
    certificate() {
      this.$axios.post("/api/user/mycert").then((res) => {
        this.certificates = res.data.data;
        // console.log("certificate",res.data);
      });
    },
    // 折叠面板
    handleChange(val) {
        console.log(val);
    },
    // 下载证书
    download() {
    var alink = document.createElement("a");
    alink.href = this.certificate.img;
    alink.download = "pic"; //图片名
    alink.click();
}
  },
};
</script>
<style scoped>
    .bgcolor {
      background: #f5f5f5;
    }
    .pr {
      position: relative;
    }
    .tabsLeft {
      width: 240px;
      text-align: center;
      display: inline-block;
      position: absolute;
      left:30px;
      top: 50px;
    }
    .mycenter {
      padding: 30px 0;
      background: #fff;
      position: relative;
    }
    .avtar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      padding-bottom: 10px;
      margin: 0 auto;
    }
    .el-tabs__item {
      font-size: 18px !important;
    }
    input {
      border: 1px solid #818181;
      padding: 10px;
      border-radius: 5px;
      text-align: center;
    }
    .datas {
      padding-left: 100px;
    }
    .datas h3 {
      font-size: 20px;
      font-weight: normal;
      margin: 20px auto;
    }
    .datas h3::before {
      content: "";
      width: 3px;
      height: 18px;
      display: inline-block;
      background: #4398f8;
      margin-right: 15px;
      vertical-align: middle;
    }
    .datas ul li {
      padding: 20px 0;
    }
    .datas ul li span {
      font-size: 18px;
    }
    .flex {
      display: flex;
    }
    .rex {
      padding-left: 50px;
    }
    .list dl {
      width: 20%;
      margin: 20px 20px 0 0;
      float: left;
    }
    .list dl:nth-child(4n + 4) {
      margin-right: 0;
    }
    .list dl img {
      width: 100%;
      height: 96px;
    }
    .infos {
      margin: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
    }
    .infos dt {
      font-size: 18px;
      padding-bottom: 20px;
    }
    .infos .text {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      padding-bottom: 10px;
    }
</style>
<style>
/* .el-tabs--left .el-tabs__nav-wrap.is-left {
  margin-top: 102px;
} */
.el-tabs--left .el-tabs__header.is-left {
  width: 240px;
  margin-top: 170px;
  margin-right: 30px;
}
</style>